<template>
    <ul class="news-list">
        <li>编号：{{ params.id }}</li>
        <li>标题：{{ params.title }}</li>
        <li>内容：{{ params.content }}</li>
    </ul>
</template>

<script setup lang="ts" name="detail">
// 从vue-router上引入 useRoute
import { toRefs } from 'vue';
import {useRoute} from 'vue-router'

// 这里需要用toRefs将query变成响应式数据，否则只有第一次进入detail页面时数据才是正确的
let {params} = toRefs(useRoute())
console.log('看看路由参数',params);


</script>

<style scoped>
.news-list {
    list-style: none;
    padding-left: 20px;
}

.news-list>li {
    line-height: 30px;
}
</style>